<template>
  <div class="content">
    <div class="header">
      <button v-if="tailor" @click="callbackTailoring" class="but">剪裁</button>
      <button v-if="!tailor" @click="callbackDone" class="but">完成</button>
      <span class="MathStartTime" :value="Math.floor(startTime)"></span>
      <span class="MathEndTime" :value="Math.floor(endTime)"></span>
      <!-- <span class="MathStartTime" :value="Math.floor(startTime)">开始时间:{{ Math.floor(startTime) }} 秒</span>|
      <span class="MathEndTime" :value="Math.floor(endTime)">结束时间:{{ Math.floor(endTime) }} 秒</span> -->
      <a-icon v-if="typeShow" @click="callbackReturn" class="videoReturn" type="close" />
    </div>
    <div class="bound">
      <!-- <video src="../assets/video.ogg" v-if="tailor" class="video" controls></video>
      <video ref="video" src="../assets/video.ogg" v-if="!tailor" class="video"></video> -->
      <video :src="videoView" width="900" v-if="tailor" class="video" controls></video>
      <video ref="video" :src="videoView" width="900" v-if="!tailor" class="video"></video>
      <div class="control" v-if="!tailor">
        <div class="bar" ref="bar" />
        <div class="start" ref="start"/>
        <div class="end" ref="end" />
        <div class="selected" ref="selected"/>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../../../api/operation/operation.js'
export default {
  name:'videoView',
  props: {
    videoView: String,
    fileId: String,
    typeName: String,
  },
  data() {
    return {
      tailor: false,      // 剪裁模式
      startProgress: 0,   // 起始时间占全长百分比
      endProgress: 0,     // 终止时间占全长百分比
      duration: 0,        // 视频时长
      startTime: 0,       // 起始时间
      endTime: 0,         // 终止时间
      typeShow:false,
    }
  },
  methods: {
    callbackTailoring() {
      this.tailor = false;
    },
    callbackReturn(){
      this.$parent.videoRefresh()
      this.$parent.$parent.operationGetInfo()
    },
    callbackDone() {
      let _this = this;
      _this.tailor = true;
      let MathStartTime = document.querySelector('.MathStartTime').getAttribute('value');
      let MathEndTime = document.querySelector('.MathEndTime').getAttribute('value');
      let shearTime = MathEndTime - MathStartTime;
      let obj = {}
      obj.fileId = _this.fileId;
      obj.montageSecond = Number(shearTime);
      obj.startSecond = Number(MathStartTime);
      api.videoMontage(null,obj).then(res=>{
        console.log(res)
        if(_this.typeName == 'timeClassify') {
          _this.$parent.videoRefresh()
          _this.$parent.$parent.operationGetInfo();
        }else {
          _this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.visible = false;
          _this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.videoRefresh()
          _this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.operationGetInfo();
        }
      })
    },
  },
  mounted() {
    const that = this;
    if(that.typeName == 'timeClassify') {
      that.typeShow = true;
    }
    setTimeout(() => {
      this.duration = this.$refs.video.duration;
    },1000);
    // 起始按钮
    that.$refs.start.onmousedown = function (eventDown) {
      let offsetX = eventDown.clientX - that.$refs.start["offsetLeft"];
      let box1 = document.querySelector('.bar');
      that.$refs.start.onmousemove = function (eventMove) {
        let l = eventMove.clientX - offsetX;
        if (l <= 0) l = 0;
        that.$refs.start.style["left"] = l + "px";
        that.$refs.selected.style["left"] = l + 6 + "px";
        that.startProgress = l / that.$refs.bar.clientWidth;
        // that.startTime = that.startProgress * that.duration * 1000;
        that.startTime = that.startProgress * that.duration;
      }
    }
    that.$refs.start.onmouseup = function () {
      that.$refs.start.onmousemove = null;
    }
    // 终止按钮
    that.$refs.end.onmousedown = function (eventDown) {
      let offsetX = eventDown.clientX - that.$refs.end["offsetLeft"];
      that.$refs.end.onmousemove = function (eventMove) {
        let l = eventMove.clientX - offsetX;
        if (l <= 0) l = 0;
        that.$refs.end.style["left"] = l + "px";
        that.$refs.selected.style["width"] = (l - that.$refs.selected['offsetLeft']) + "px";
        that.endProgress = l / that.$refs.bar.clientWidth;
        // that.endTime = that.endProgress * that.duration * 1000;
        that.endTime = that.endProgress * that.duration;
      }
    }
    that.$refs.end.onmouseup = function () {
      that.$refs.end.onmousemove = null;
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  height: 100vh;
  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    .videoReturn {
      position: absolute;
      right: 30px;
    }
  }
  .but {
    margin-right: 12px;
    width: 94px !important;
    height: 30px !important;
    border-radius: 30px !important;
    background-color: #0078b5 !important;
    color: #fff !important;
    border: 0;
    cursor: pointer;
  }
  .bound {
    // height: calc(100% - 64px);
    display: flex;
    justify-content: center;
    background-color: #333232;
    position: relative;

    .video {
      height: 100%;
      outline: none;
      border: none;
    }

    .control {
      position: absolute;
      width: 90%;
      height: 32px;
      z-index: 100;
      bottom: 54px;
      .bar {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.4);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 200;
      }

      .selected {
        height: 6px;
        border-radius: 3px;
        background: rgba(0, 120, 182, 0.8);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 300;
      }

      .start {
        width: 12px;
        height: 18px;
        background-color: #81d6ff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 6px;
        cursor: pointer;
        z-index: 400;
      }

      .end {
        width: 12px;
        height: 18px;
        background-color: #81d6ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
        border-radius: 6px;
        cursor: pointer;
        z-index: 400;
      }
    }
  }
  
}
</style>
